<template>
	<view class="rose-box">
		<view class="rose-box-head">
			<view class="Current-rose-number">{{vipInfo.balance}}</view>
			<text class="rose-box-msg">当前剩余玫瑰（支）</text>
			<text class="rose-detail" @click="toRoseList">查看明细</text>
		</view>
		<view class="inner">
			<view class="rose-title">充值金额</view>
			<view class="rose-ul-box">
				<view class="rose-ul">
					<view :class="['rose-li', { active: presentRose == index }]" v-for="(item, index) in roseLi" :key="item.id" @click="selectRose(index)">
						<view class="rose-count">
							<text>{{ item.quantity }}支</text>
							<image :src="presentRose == index ? whiteRose : hotRose" mode="aspectFit"></image>
						</view>
						<view class="rose-money">{{ item.price }}元</view>
					</view>
				</view>
				<view class="rose-recharge" @click="PlaceOrder">立即充值</view>
			</view>
			<view class="rose-title">玫瑰特权</view>
			<view class="rose-privilege">
				<view class="rose-privilege-li">
					<image src="http://static.kuaimayoupin.com/3252046015183303.png" mode=""></image>
					<text>和喜欢的人打招呼,增加聊天亲密度</text>
				</view>
				<view class="rose-privilege-li">
					<image src="http://static.kuaimayoupin.com/1882340372640751.png" mode=""></image>
					<text>邀请红娘协助,对心动的Ta制定恋爱计划</text>
				</view>
				<view class="rose-privilege-li">
					<image src="http://static.kuaimayoupin.com/0908574504527028.png" mode=""></image>
					<text>向喜欢的Ta写表白信</text>
				</view>
				<view class="rose-privilege-li">
					<image src="http://static.kuaimayoupin.com/5102540001501372.png" mode=""></image>
					<text>可在商城直接消费,或兑换京东卡、爱奇艺VIP等</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { roseList, transactions, genRoseOrder } from '@/api/rose/rose.js';
import {loadVipinfo} from '@/api/user/user'
export default {
	data() {
		return {
			hotRose: 'http://static.kuaimayoupin.com/3651917739830339.png',
			whiteRose: 'http://static.kuaimayoupin.com/2855754798504539.png',
			roseLi: [],
			presentRose: 0,
			vipInfo:{}
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		toRoseList(){
			uni.navigateTo({
				url:'../roseList/roseList'
			})
		},
		init() {
			this.roseList();
			// this.transactions();
			const vipInfo = uni.getStorageSync('vipInfo');
			this.vipInfo = Object.assign({}, this.vipInfo, vipInfo);
		},
		roseList() {
			roseList().then(res => {
				this.roseLi = res.data;
			});
		},
		transactions() {
			transactions().then(res => {
				console.log(res, '==');
			});
		},
		selectRose(index) {
			this.presentRose = index;
		},
		PlaceOrder() {
			const ID = {
				id:this.roseLi[this.presentRose].id
			}
			genRoseOrder(ID).then(res => {
				const payInfo = res.data;
				const _this = this
				uni.requestPayment({
					...payInfo,
					complete: (res)=> {
						loadVipinfo().then(response=>{
								_this.vipInfo = Object.assign({}, _this.vipInfo, response.data);
								uni.setStorageSync('vipInfo', response.data);
								getApp().globalData.vipInfo = response.data
						})
					},
				});
			});
		}
	}
};
</script>

<style lang="scss">
.rose-box-head {
	height: 252upx;
	position: relative;
	text-align: center;
	padding: 52upx;
	box-sizing: border-box;
	color: #fff;
	background: url('http://static.kuaimayoupin.com/7886512067220559.png') no-repeat;
	background-size: 100% 100%;
	.Current-rose-number {
		font-size: 80upx;
		line-height: 112upx;
	}
	.rose-box-msg {
		font-size: 32upx;
		display: block;
		margin: auto;
	}
	.rose-detail {
		position: absolute;
		right: 0;
		top: 40upx;
		width: 144upx;
		line-height: 56upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 100px 0px 0px 100px;
		opacity: 0.6;
		color: #000;
	}
}
.rose-title {
	font-size: 36upx;
	font-weight: 600;
	margin: 40upx 0;
	color: rgba(71, 74, 88, 1);
	line-height: 48upx;
}
.rose-ul-box {
	padding: 40upx 20upx;
	box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
	box-sizing: border-box;
}
.rose-ul {
	display: grid;
	grid-template-columns: repeat(3, 200upx);
	grid-column-gap: 30upx;
	image {
		display: block;
		width: 24upx;
		height: 28upx;
		margin-left: 10upx;
	}
	.rose-li {
		border: 1px solid rgba(248, 190, 85, 1);
		text-align: center;
		margin-bottom: 30upx;
		border-radius: 8px;
		padding: 20upx 0;
		color: rgba(71, 74, 88, 1);
		height: 120upx;
		.rose-count {
			font-size: 32upx;
			font-weight: 600;

			display: flex;
			justify-content: center;
			margin-bottom: 10upx;
			align-items: center;
		}
		.rose-money {
			font-size: 28upx;
			font-weight: 400;
			line-height: 36upx;
		}
	}
}
.rose-ul-box .rose-ul .active {
	background: linear-gradient(90deg, rgba(245, 219, 156, 1) 0%, rgba(248, 187, 77, 1) 100%);
	border-radius: 8px;
	color: #fff !important;
}
.rose-recharge {
	background: linear-gradient(166deg, rgba(246, 216, 147, 1) 0%, rgba(248, 187, 77, 1) 100%);
	border-radius: 2px;
	line-height: 80upx;
	font-size: 36upx;
	color: rgba(109, 59, 15, 1);
	text-align: center;
}
.rose-privilege {
	margin-bottom: 60upx;
}
.rose-privilege-li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 24upx;
	box-sizing: border-box;
	box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
	border-radius: 16upx;
	margin-bottom: 20upx;

	image {
		display: block;
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
}
</style>
